<template>
  <div style="background: #F6F6F6">
    <div id="TenantStatistics" :style="{width: '900px', height: '550px'}"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import router from "@/router";
export default {
  name: "TenantStatistics",
  mounted(){
    this.drawChart()
  },
  methods: {
    drawChart(){
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('TenantStatistics'))
      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ];
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };
      const labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
          name: {}
        }
      };
      myChart.on('click', function (params) {
        router.push({
          path: "/Manager/CostCheck",
          query: {
            id:params.data[2],
          }
        })
      })
      // 绘制图表
      myChart.setOption({
        dataset: {
          source: [
            ['score', 'amount', 'product'],
            [89.3, 58212, '9'],
            [57.1, 78254, '8'],
            [74.4, 41032, '7'],
            [50.1, 12755, '6'],
            [89.7, 20145, '5'],
            [68.1, 79146, '4'],
            [19.6, 91852, '3'],
            [10.6, 101852,'2'],
            [32.7, 20112, '1']
          ]
        },
        grid: { containLabel: true },
        xAxis: { name: '总费用/元' },
        yAxis: { type: 'category' , name:'租户ID'},
        visualMap: {
          orient: 'horizontal',
          left: 'center',
          min: 10,
          max: 100,
          text: ['消费较高', '消费较低'],
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ['#65B581', '#FFCE34', '#FD665F']
          }
        },
        series: [
          {
            type: 'bar',
            encode: {
              // Map the "amount" column to X axis.
              x: 'amount',
              // Map the "product" column to Y axis
              y: 'product'
            }
          }
        ]
      });
    }
  }
}
</script>

<style scoped>

</style>